<template>
    <!-- 添加外层容器用于设置背景 -->
    <div class="login-container">
        <van-form>
            <van-cell-group inset class="login-card">
                <!-- 原有表单内容保持不变 -->
                <van-field v-model="form.username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="form.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-button round block type="primary" native-type="submit" @click="onSubmit">
                    提交
                </van-button>
            </van-cell-group>
        </van-form>
    </div>
</template>
<script setup lang="ts">


import { ref } from 'vue';
import router from '@/router';
import axios from 'axios';
import { showSuccessToast, showFailToast } from 'vant';
import{Login}from'@/api/Index'

showFailToast('失败文案');
// export default {
//   setup() {

const form=ref({
    username:'',
    password:''
})
const onSubmit = () => {

    Login(form.value).then(res=>{
        console.log(res)
          if (res.code == 200) {
            router.push('/Main')
        }
        else {
            showFailToast('登录失败');
        }
    })
  
}
// return {
//   username,
//   password,
//   onSubmit,
// };


</script>
<style scoped>
/* 容器样式 */
.login-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
}

/* 登录卡片 */
.login-card {
    width: 85%;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.login-title {
    color: #182848;
    text-align: center;
    margin: 1rem 0 2rem;
    font-size: 1.5rem;
}

/* 适配原设计的输入框间距 */
.van-cell-group {
    --van-cell-vertical-padding: 14px;
}

/* 容器样式 - 添加背景图 */
.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        /* 半透明遮罩 */
        url(/public/img/D31DBA4241A8AD1F72521B553A00548F.jpg) no-repeat center center fixed;
    /* 背景图路径 */
    background-size: cover;
    /* 完整覆盖容器 */
}

/* 登录卡片添加半透明背景 */
.login-card {
    width: 85%;
    padding: 2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    /* 半透明白色背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 保持原有输入框间距 */
.van-cell-group {
    --van-cell-vertical-padding: 14px;
}
</style>